<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">

    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

    <style>
        body {
            background-color: #ffffff;
        }
    </style>

</head>
<!--生薄编辑-->
<body>
<form id="edit" lay-filter="test" class="layui-form">
    <div class="layui-form layuimini-form">
        <!--编号-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">ID：</label>
            <div class="layui-input-block" id="id" style="width: 80%">
                <label name="id" class="layui-form-label-col "></label>
            </div>
        </div>
        <!--姓名-->
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block" style="width: 80%">
                <input type="text" name="username" id="username" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                       value="" class="layui-input">
            </div>
        </div>
        <!--性别-->
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block" style="width: 80%">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
        <!--当前寿命-->
        <div class="layui-form-item">
            <label class="layui-form-label ">当前寿命：</label>
            <div class="layui-input-block" style="padding-left: 8px;padding-top: 17px;width: 79.7%">
                <div id="totalAge" class="demo-slider"></div>
            </div>
        </div>
        <!--总寿命-->
        <div class="layui-form-item">
            <label class="layui-form-label ">总寿命：</label>
            <div class="layui-input-block" style="padding-left: 8px;padding-top: 17px;width: 79.7%">
                <div id="overAge" class="demo-slider"></div>
            </div>
        </div>
        <!--类别-->
        <div class="layui-form-item">
            <label class="layui-form-label ">类别：</label>
            <div class="layui-input-block layui-anim" data-anim="layui-anim-scaleSpring" style="width: 80%">
                <select name="type" id="type" lay-filter="aihao">
                    <option value="" disabled="disabled">请选择</option>
                </select>
            </div>
        </div>
        <!--最近编辑时间-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">最后编辑时间：</label>
            <div class="layui-input-block" id="lass_updatetime" style="width: 80%">
                <label name="lass_updatetime" class="layui-form-label-col"></label>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal " lay-submit lay-filter="saveBtn">确认</button>
                <button id="none" class="layui-btn layui-btn-primary ">返回</button>
            </div>
        </div>
    </div>
</form>

<!--隐藏域-->
<div style="display: none">
    <input type="text" value="" id="ageCurrent">
    <input type="text" value="" id="ageOver">
    <input type="text" value="" id="sex">
    <input type="text" value="" id="types">
</div>

<script>
    layui.use(['form', 'slider', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            slider = layui.slider,
            $ = layui.jquery,
            cage = 0,
            oage = 0,
            sex = $("#sex").val();

        form.val("test", {
            "sex": sex
        });

        getTypeList();

        /*渲染【类别】下拉列表框*/
        function getTypeList() {
            $.ajax({
                type: "GET",
                url: "/getTypeList",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, item) {
                        $('#type').append(new Option(item.typeName, item.typeId));
                        $("#type").val($("#types").val());
                    });
                    form.render("select");
                }
            });
        }

        /*返回事件*/
        $("#none").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        })

        /*滑块初始化*/
        var sl = slider.render({
            elem: "#totalAge",
            theme: '#5FB878',
            min: 0,
            disabled: true,
            max: parseInt($("#ageOver").val()) + parseInt($("#ageCurrent").val()),
            setTips: function (value) {
                cage = value;
                return value + '岁';
            }
        });
        var slover = slider.render({
            elem: "#overAge",
            theme: '#5FB878',
            min: 0,
            max: 150,
            setTips: function (value) {
                oage = value;
                return value + '岁';
            }
        });
        //设置滑块值
        sl.setValue($("#ageCurrent").val());
        slover.setValue(parseInt($("#ageOver").val()) + parseInt($("#ageCurrent").val()));

        /*保存事件*/
        form.on('submit(saveBtn)', function (data) {
            //数据封装
            var updateInfo = {
                id: $('#id label').text(),
                name: $('#username').val().trim(),
                sex: $('input[name="sex"]:checked').val(),
                currenAge: cage,
                overAge: oage + cage,
                type: $('#type').val()
            };
            if (oage <= cage) {
                layer.msg("总寿命应高于当前寿命，请重试！", {icon: 2, time: 1500});
                return false;
            }
            if ($('#type').val() === '' || $('#type').val() === null) {
                layer.msg("未选择用户类别，请重试！", {icon: 2, time: 1500});
                return false;
            }
            layer.confirm("确认修改信息吗？", {icon: 3}, function (index) {
                $.ajax({
                    type: 'PUT',
                    dataType: 'text',
                    url: '/livebookModify',
                    data: {updateInfo: JSON.stringify(updateInfo)},
                    error: function () {
                        layer.alert("系统错误！");
                    },
                    success: function (result) {
                        if (result === 'success') {
                            layer.alert('修改成功！',
                                {
                                    title: '成功',
                                    skin: 'layui-layer-molv',
                                    btn: ['返回'],
                                    anim: 1,
                                    icon: 6,
                                    yes: function () {
                                        parent.layui.table.reload('testId', {
                                            page: {
                                                curr: 1
                                            },
                                        });
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        } else {
                            layer.alert('修改失败，请重试？',
                                {
                                    title: '错误',
                                    skin: 'layui-layer-molv',
                                    btn: ['重试', '退出'],
                                    anim: 1,
                                    icon: 5,
                                    yes: function (index) {
                                        layer.close(index);
                                    },
                                    btn2: function () {
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        }
                    }
                });
            });
            return false;
        });
    });
</script>
</body>
</html>